import { Form, Input, Checkbox, Button } from 'antd'
import styles from './login.module.less'
import { TypeLoginAPI } from '../../type/api'
import { loginAPI } from '../../api/loginApi'
import storage from '../../util/storage'
function login() {
  async function onFinish(e: TypeLoginAPI) {
    const res = await loginAPI(e)
    storage.set('token', res)
    window.location.href = '/'
  }
  return (
    <div className={styles.box_1}>
      <div className={styles.box_1_title_1}>系统登录</div>
      <div className={styles.box_1_box_1}>
        <Form
          name='basic'
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete='off'
        >
          <Form.Item
            label='Username'
            name='username'
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label='Password'
            name='password'
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item name='remember' valuePropName='checked' label={null}>
            <Checkbox>Remember me</Checkbox>
          </Form.Item>

          <Form.Item label={null}>
            <Button type='primary' htmlType='submit'>
              Submit
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default login
